<script setup>

import {computed, onMounted, reactive, ref} from "vue";
import {
  Calendar,
  More,
  Notebook,
  OfficeBuilding,
  Setting,
  Trophy,
  Wallet
} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import ValidUtil from "@/utils/validUtil.js";
import store from "@/store/index.js";
import router from "@/router/index.js";
//------------------------用户数据---------------------------------------
let userDataForm = {
  userid:'',
  name:'',        //姓名
  gender:'',      //性别
  username:'',    //用户名--->可改
  phone:'',       //电话--->可改
  email:'',       //邮件--->可改
  role:'',        //身份

  class_name:'',  //班级
  major:'',       //专业
  hukou:'',       //户口
  address:'',     //家庭住址--->可改
  type:'',        //学生种类（普通生/交换生/留学生）
  education:'',   //学历
  birthdate:'',   //生日--->可改
  political_status:'',//政治面貌
  nationality:'', //国籍
  id_card:'',     //学生卡号
}
onMounted(()=>{
  let userInfo = localStorage.getItem("userInfo");
  let Id = userInfo.slice(11,18)
  store.dispatch('personalPortalModule/getLeadersByIdAction',{'id':'user003'})
  console.log(userInfo)
})
//------------------------通知数据---------------------------------------
const tableData = [
  {
    num: '1',
    title: '关于做好本学期工作总结、暑期工作安排和总结、下学期重点工作计划的通知',
    department: '学校办公室',
    date:'2024年6月20日',
  },
  {
    num: '2',
    title: '关于开展学校电动自行车实名登记上牌工作的通知',
    department: '保卫处',
    date:'2024年5月24日',
  },
  {
    num: '3',
    title: '关于转发国家语委科研规划领导小组办公室开展2024年度国家语委科研项目申报工作的通知',
    department: '本科生院',
    date:'2024年7月8日',
  },
  {
    num: '4',
    title: '关于做好2024年学校综合财务预算调整工作的通知',
    department: '财务部',
    date:'2024年7月5日',
  },
]
//------------------------提交表单标识物---------------------------------------
const dialogFormVisible = ref(false);

//------------------------设置信息处理函数---------------------------------------
function startSetting(){
  dialogFormVisible.value = true;
}

// //------------------------提交表单处理函数---------------------------------------
function commitTable(){
  if(!ValidUtil.isValidName(userDataForm.name)){
    ElMessage('请输入正确的中文姓名');
  }else if(!ValidUtil.isValidPhone(userDataForm.phone)){
    ElMessage('请输入正确的手机号码');
  }else if(!ValidUtil.isValidEmail(userDataForm.email)){
    ElMessage('请输入正确的电子邮件');
  }else{
    dialogFormVisible.value = false;
    // // putUser(userDataForm)把userDataForm传给全局的user状态！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！;
    // store.dispatch('initModule/updateUser', userDataForm)
    // store.dispatch('initModule/user')
  }
}

//------------------------app按钮点击函数---------------------------------------
function clickApp(path,flag){
  router.push(path)
  store.commit('personalPortalModule/SET_VIEWFLAG',flag)
}
</script>

<template>
  <div class="up-container">
        <el-card class="info-card" style="width: 100%" shadow="never">
          <template #header><div class="header clearfix">用户信息</div></template>
          <!--           信息框中不可改变的数据-->
          <div class="immutable-userData-box">
            <!--            用户头像-->
            <div class="userAvatar" style="width:15%">
              <img src="https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/student_System_img/user.png" width="100%"/>
            </div>
            <!--            其他不可改变的数据-->
            <div class="immutable-userData" style="width: 70%;margin-right:10%;">
              <el-row>
                <el-col :span="16">
                  <el-text>姓名: {{store.getters['personalPortalModule/getLeadersById'].name}}</el-text>
                </el-col>
                <el-col :span="8">
                  <el-text>身份: 领导</el-text>
                </el-col>
              </el-row>
              <br/>

              <el-row>
                <el-col :span="16">
                  <el-text>性别: {{store.getters['personalPortalModule/getLeadersById'].gender}}</el-text>
                </el-col>
                <el-col :span="8">
                  <el-text>职位: {{store.getters['personalPortalModule/getLeadersById'].position}}</el-text>
                </el-col>
              </el-row>
              <br/>

              <el-row>
                <el-col :span="16">
                  <el-text>职称: {{store.getters['personalPortalModule/getLeadersById'].title}}</el-text>
                </el-col>
                <el-col :span="8">
                  <el-text>院系: {{store.getters['personalPortalModule/getLeadersById'].department}}</el-text>
                </el-col>
              </el-row>
              <br/>

              <el-row>
                <el-col>
                  <el-text>聘用时间: {{store.getters['personalPortalModule/getLeadersById'].hireDate}}</el-text>
                </el-col>
              </el-row>
            </div>
          </div>
          <!--          分割线-->
          <div class="partition-line">
            <el-divider content-position="center" border-style="dashed">
              <el-text type="primary">详细信息</el-text>
            </el-divider>
          </div>
          <!--          详细信息-->
          <div class="mutable-userData-box">
            <div class="mutable-userData" style="margin-left:5%">
              <el-row>
                <el-col :span="8"><el-text>电话号码:{{store.getters['personalPortalModule/getLeadersById'].phone}}</el-text></el-col>
              </el-row>
            </div>

            <!--            打开表单的按钮-->
            <div class="setting-box">
              <div class="blank-box"></div>
              <div class="setting">
                <el-button circle  @click="startSetting()">
                  <el-icon style="vertical-align: middle">
                    <Setting />
                  </el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>
  <div class="down-container">
        <el-card class="announce-card" style="width: 60%" shadow="never" header="校内通知">
          <div class="right-content">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="num" label="序号" align="center" width="70" />
              <el-table-column prop="title" label="标题" align="center" />
              <el-table-column prop="department" label="发布部门" align="center" width="160" />
              <el-table-column prop="date" label="日期" align="center" width="140" />
            </el-table>
          </div>
        </el-card>

        <el-card class="app-card" style="width: 33%" shadow="never">
          <template #header>应用程序</template>
          <div class="app-card-body" style="display: flex; flex-direction: column;">

            <div class="app-card-1">
              <div class="item-box" @click="clickApp('/leaders/schedule','schedule')">
                <div class="item-icon"><el-icon size="35" type="default"><Calendar/></el-icon></div>
                <div class="item-name"><el-text>排课信息</el-text></div>
              </div>
              <div class="item-box" @click="clickApp('/leaders/dormitory','dormitory')">
                <div class="item-icon"><el-icon size="35" type="default"><OfficeBuilding /></el-icon></div>
                <div class="item-name"><el-text>职工宿舍</el-text></div>
              </div>
              <div class="item-box" @click="clickApp('/leaders/fee','fee')">
                <div class="item-icon"><el-icon  size="35" type="default"><Wallet /></el-icon></div>
                <div class="item-name"><el-text>工资信息</el-text></div>
              </div>
            </div>

            <div class="app-card-2">

              <div class="item-box"  @click="clickApp('/leaders/award','award')">
                <div class="item-icon"><el-icon size="35" type="default"><Trophy /></el-icon></div>
                <div class="item-name"><el-text>个人荣誉</el-text></div>
              </div>

            </div>

          </div>
        </el-card>
      </div>
<!--  提交对话框-->
  <el-dialog v-model="dialogFormVisible" title="用户信息" width="500">
      <el-form>
        <br/>
        <el-form-item label="电子邮件：" :label-width='100'>
          <el-input v-model="userDataForm.email" autocomplete="off" style="width: 90%"/>
        </el-form-item>
        <el-form-item label="电话号码：" :label-width='100'>
          <el-input v-model="userDataForm.phone" autocomplete="off"style="width: 90%"/>
        </el-form-item>
        <el-form-item label="家庭住址：" :label-width='100'>
          <el-input v-model="userDataForm.address" autocomplete="off" style="width: 90%"/>
        </el-form-item>
        <el-form-item label="出生日期：" :label-width='100'>
          <el-date-picker
              v-model="userDataForm.birthdate"
              type="date"
              aria-label="选择日期"
              :placeholder="userDataForm.birthdate"
              style="width: 90%"
          />
        </el-form-item>
      </el-form>
      <!--提交和取消按钮-->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="commitTable()">提交</el-button>
        </div>
      </template>
    </el-dialog>

</template>

<style scoped>

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.userInfo-field{
  width: 1080px;
  margin:60px auto;
  padding: 1%;
}
.up-container{
  display: flex;
  margin: 1%;
}
.down-container{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  margin: 1%;
}
.immutable-userData-box{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}
.userAvatar{
  display: flex;
  justify-content: center;
}
.setting-box{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}
.el-card /deep/ .el-card__header {
  background-color: #3385D9;
  color: white;
}
.app-card-1{
  display: flex;
  flex-direction: row;
  margin-top: 1%;
  justify-content:space-between;
}
.app-card-2{
  display: flex;
  flex-direction: row;
  margin-top: 10%;
  justify-content:space-between;
}
.item-box{
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.item-box a{
  text-decoration: none;
  color: inherit;
}
.item-name{
  display: flex;
  justify-content: center;
}
.item-icon{
  display: flex;
  justify-content: center;
}
</style>
